<template>
  <div class="login_container">
    <div class="login_box animate__animated animate__bounceInDown">
      <div class="logo_box">
        <div class="logo_image_box">
          <div class="logo_image">
            <img src="@/assets/logo.png" alt="" />
          </div>
        </div>
      </div>
      <div class="from_box">
        <div class="input_box">
          <el-form
            :model="loginFrom"
            ref="loginFrom"
            :rules="rules"
            class="demo-ruleForm"
          >
            <el-form-item label="" prop="username">
              <el-input
                v-model="loginFrom.username"
                prefix-icon="iconfont icon-yonghu2"
              ></el-input>
            </el-form-item>
            <el-form-item label="" prop="password">
              <el-input
                v-model="loginFrom.password"
                prefix-icon="iconfont icon-zu"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="button_box">
            <div>
              <el-button type="primary" size="small" @click="onClickLogin"
                >登录</el-button
              >
              <el-button type="info" size="small" @click="reset"
                >重置</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "../http/api";
export default {
  data() {
    return {
      loginFrom: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请输入登录账号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "change" },
          {
            min: 6,
            max: 25,
            message: "长度在 6 到 25 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    onClickLogin() {
      this.$refs.loginFrom.validate(async (valid) => {
        if (!valid) return;
        const res = await login(this.loginFrom);
        console.log("await结果:", res);
        sessionStorage.setItem("token", res.token);

        // console.log(this.$route.query.redirect);
        this.$router.push({ path: "/Welcome" });
        this.$message({
          message: "恭喜你，登录成功",
          type: "success",
        });
      });
    },
    reset() {
      this.$refs.loginFrom.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.login_container {
  width: 100vw;
  height: 100vh;
  background-color: #2b4b6b;
  .login_box {
    width: 450px;
    height: 304px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.836);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
  }
}
.logo_box {
  width: 100%;
  height: 20%;
  // background-color: skyblue;
  position: relative;
  .logo_image_box {
    width: 150px;
    height: 150px;
    background-color: #fff;
    box-shadow: 0px 0px 10px darkgray;
    border-radius: 50%;
    position: absolute;
    left: 140px;
    bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    .logo_image {
      width: 85%;
      height: 85%;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #efefef;
    }
    img {
      width: 95%;
      height: 95%;
      border-radius: 50%;
    }
  }
}
.from_box {
  width: 100%;
  height: 80%;
  // background-color: pink;
  .input_box {
    width: 90%;
    height: 60%;
    // background-color: green;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 80px auto;
  }
}
.el-form-item {
  // width: 100%;
  // display: flex;
  // justify-content: center;
  .el-form-item__content {
    width: 100%;
    height: 100%;
    margin-right: 20px;
  }
}
.input {
  margin-top: 20px;
}
.button_box {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.button_box div {
  margin-top: 20px;
}
// .el-form {
//   width: 100%;
//   padding: 0 50px;
//   box-sizing: border-box;
//   .element.style {
//     margin-right: 80px;
//   }
//   .el-form-item__content {
//     width: 100%;
//     height: 100%;
//   }
// }
</style>